<!DOCTYPE html>
<html dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Popover - Standalone</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link href="../../../../../css/core.css" rel="stylesheet">
  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script src="../../../../../dist/ionic.js"></script>
</head>

<body>
  <button id="basic" onclick="presentPopover({ component: 'profile-page', event: event })">Show Popover</button>
  <button onclick="presentPopover({ component: 'translucent-page', event: event, translucent: true })">Show Translucent Popover</button>
  <button color="secondary" onclick="presentPopover({ component: 'list-page', event: event })">Show Long List Popover</button>
  <button color="danger" onclick="presentPopover({ component: 'profile-page' })">No Event Popover</button>

  <ion-popover-controller></ion-popover-controller>

  <style>
    body > button {
      display: block;
      clear: both;
      width: 100%;
      padding: 12px 8px;
      font-size: 1em;
      background: #f8f8f8;
      border: 1px solid #eee;
      border-radius: 4px;
      margin-bottom: 8px;
    }
  </style>

  <script>
    async function presentPopover(opts) {
      const popoverController = document.querySelector('ion-popover-controller');
      await popoverController.componentOnReady();
      const popoverElement = await popoverController.create(opts);
      return await popoverElement.present();
    }

    class ProfilePage extends HTMLElement {
      constructor() {
        super();
      }

      connectedCallback() {
        this.innerHTML = `
          <ion-content>
            <ion-list>
              <ion-list-header>Ionic</ion-list-header>
              <ion-item><ion-label>Item 0</ion-label></ion-item>
              <ion-item><ion-label>Item 1</ion-label></ion-item>
              <ion-item><ion-label>Item 2</ion-label></ion-item>
              <ion-item><ion-label>Item 3</ion-label></ion-item>
            </ion-list>
          </ion-content>
        `;
      }
    }

    customElements.define('profile-page', ProfilePage);

    class ListPage extends HTMLElement {
      constructor() {
        super();
      }

      connectedCallback() {
        let items = '';
        for (var i = 0; i < 30; i++) {
          items += '<ion-item><ion-label>Item ' + i + '</ion-label></ion-item>';
        }

        this.innerHTML = `
          <ion-content>
            <ion-list>
              <ion-list-header>Ionic</ion-list-header>
              ` + items + `
            </ion-list>
          </ion-content>
        `;
      }
    }

    customElements.define('list-page', ListPage);

    class TranslucentPage extends HTMLElement {
      constructor() {
        super();
      }

      connectedCallback() {
        this.innerHTML = `
          <div padding>
            <h1>Translucent Popover</h1>
          </div>
        `;
      }
    }

    customElements.define('translucent-page', TranslucentPage);
  </script>
</body>
</html>
